<template>
  <view class="test-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-content">
        <view class="nav-left" @click="goBack">
          <text class="nav-icon">←</text>
        </view>
        <view class="nav-title">正念专注力测试</view>
        <view class="nav-right"></view>
      </view>
    </view>

    <!-- 测试介绍 -->
    <view class="test-intro" v-if="!testStarted">
      <view class="intro-card">
        <view class="test-icon">🧘</view>
        <view class="test-title">正念专注力测试</view>
        <view class="test-subtitle">Mindfulness Attention Test</view>
        <view class="test-description">
          评估您的专注力水平和正念觉察能力，了解您在日常生活中保持当下觉知的程度。
        </view>
        
        <view class="test-info">
          <view class="info-item">
            <text class="info-label">测试时长</text>
            <text class="info-value">4-6分钟</text>
          </view>
          <view class="info-item">
            <text class="info-label">题目数量</text>
            <text class="info-value">15题</text>
          </view>
          <view class="info-item">
            <text class="info-label">测试类型</text>
            <text class="info-value">专注力评估</text>
          </view>
        </view>

        <view class="test-tips">
          <view class="tips-title">🎯 测试说明</view>
          <view class="tips-content">
            • 请根据您最近一周的真实体验作答\n
            • 关注您在日常活动中的专注程度\n
            • 诚实回答关于注意力分散的情况\n
            • 测试将帮助您了解专注力现状
          </view>
        </view>

        <button class="start-btn" @click="startTest">开始测试</button>
      </view>
    </view>

    <!-- 测试进行中 -->
    <view class="test-progress" v-if="testStarted && !testCompleted">
      <!-- 进度条 -->
      <view class="progress-bar">
        <view class="progress-bg">
          <view class="progress-fill" :style="{width: progressPercent + '%'}"></view>
        </view>
        <text class="progress-text">{{currentQuestion + 1}}/{{questions.length}}</text>
      </view>

      <!-- 题目卡片 -->
      <view class="question-card">
        <view class="question-number">第 {{currentQuestion + 1}} 题</view>
        <view class="question-text">{{questions[currentQuestion].question}}</view>
        
        <view class="options-list">
          <view 
            class="option-item" 
            :class="{selected: selectedAnswer === index}"
            v-for="(option, index) in questions[currentQuestion].options" 
            :key="index"
            @click="selectAnswer(index)"
          >
            <view class="option-radio">
              <view class="radio-dot" v-if="selectedAnswer === index"></view>
            </view>
            <text class="option-text">{{option.text}}</text>
          </view>
        </view>

        <view class="question-actions">
          <button 
            class="prev-btn" 
            @click="prevQuestion" 
            :disabled="currentQuestion === 0"
          >
            上一题
          </button>
          <button 
            class="next-btn" 
            @click="nextQuestion"
            :disabled="selectedAnswer === null"
          >
            {{currentQuestion === questions.length - 1 ? '完成测试' : '下一题'}}
          </button>
        </view>
      </view>
    </view>

    <!-- 测试结果 -->
    <view class="test-result" v-if="testCompleted">
      <view class="result-card">
        <view class="result-header">
          <view class="result-icon">{{resultData.icon}}</view>
          <view class="result-title">{{resultData.title}}</view>
          <view class="result-score">得分：{{totalScore}}/75</view>
        </view>

        <view class="result-level">
          <view class="level-badge" :class="resultData.level">
            {{resultData.levelText}}
          </view>
        </view>

        <view class="result-description">
          <view class="desc-title">🎯 结果解读</view>
          <view class="desc-content">{{resultData.description}}</view>
        </view>

        <view class="result-suggestions">
          <view class="suggestions-title">🧘 提升建议</view>
          <view class="suggestions-list">
            <view 
              class="suggestion-item" 
              v-for="(suggestion, index) in resultData.suggestions" 
              :key="index"
            >
              • {{suggestion}}
            </view>
          </view>
        </view>

        <view class="result-actions">
          <button class="retake-btn" @click="retakeTest">重新测试</button>
          <button class="save-btn" @click="saveResult">保存结果</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      testStarted: false,
      testCompleted: false,
      currentQuestion: 0,
      selectedAnswer: null,
      answers: [],
      totalScore: 0,
      
      questions: [
        {
          question: "我能够长时间专注于一项任务而不被分心",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "当我在做事情时，我能够完全沉浸其中",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我能够觉察到自己的思绪何时开始游离",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我在听别人说话时能够保持专注",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我能够专注于当下的感受和体验",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我容易被外界的声音或动静打断",
          options: [
            { text: "总是", score: 1 },
            { text: "经常", score: 2 },
            { text: "有时", score: 3 },
            { text: "很少", score: 4 },
            { text: "从不", score: 5 }
          ]
        },
        {
          question: "我能够在压力下保持冷静和专注",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我会注意到自己的呼吸和身体感觉",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我的思绪经常在过去和未来之间游走",
          options: [
            { text: "总是", score: 1 },
            { text: "经常", score: 2 },
            { text: "有时", score: 3 },
            { text: "很少", score: 4 },
            { text: "从不", score: 5 }
          ]
        },
        {
          question: "我能够在多任务环境中保持专注",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我能够觉察到自己的情绪变化",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我在阅读时能够保持专注不走神",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我能够在不判断的情况下观察自己的想法",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        },
        {
          question: "我会因为手机或网络而分心",
          options: [
            { text: "总是", score: 1 },
            { text: "经常", score: 2 },
            { text: "有时", score: 3 },
            { text: "很少", score: 4 },
            { text: "从不", score: 5 }
          ]
        },
        {
          question: "我能够在日常活动中保持正念觉察",
          options: [
            { text: "从不", score: 1 },
            { text: "很少", score: 2 },
            { text: "有时", score: 3 },
            { text: "经常", score: 4 },
            { text: "总是", score: 5 }
          ]
        }
      ]
    }
  },
  
  computed: {
    progressPercent() {
      return ((this.currentQuestion + 1) / this.questions.length) * 100
    },
    
    resultData() {
      if (this.totalScore <= 30) {
        return {
          icon: '😵',
          title: '专注力较弱',
          level: 'low',
          levelText: '需要提升',
          description: '您的专注力水平较低，容易被外界干扰，思绪经常游离。这可能影响您的工作效率和生活质量，建议通过专门的训练来提升专注力。',
          suggestions: [
            '每天进行5-10分钟的专注力训练',
            '减少多任务处理，一次只做一件事',
            '创造无干扰的工作环境',
            '练习深呼吸和冥想',
            '限制手机和社交媒体的使用时间'
          ]
        }
      } else if (this.totalScore <= 45) {
        return {
          icon: '😐',
          title: '专注力一般',
          level: 'medium-low',
          levelText: '有待改善',
          description: '您的专注力处于中等偏下水平，在某些情况下能够保持专注，但仍容易受到干扰。通过适当的训练可以显著提升专注力水平。',
          suggestions: [
            '建立固定的专注训练时间',
            '使用番茄工作法提高效率',
            '练习正念冥想和身体扫描',
            '减少环境中的干扰因素',
            '培养单一任务的工作习惯'
          ]
        }
      } else if (this.totalScore <= 60) {
        return {
          icon: '🙂',
          title: '专注力良好',
          level: 'medium-high',
          levelText: '表现不错',
          description: '您具有良好的专注力水平，能够在大多数情况下保持专注，并具备一定的正念觉察能力。继续保持并进一步提升会让您受益更多。',
          suggestions: [
            '继续保持良好的专注习惯',
            '尝试更高难度的专注力训练',
            '在日常生活中练习正念觉察',
            '帮助他人提升专注力',
            '探索不同类型的冥想练习'
          ]
        }
      } else {
        return {
          icon: '🧘‍♀️',
          title: '专注力卓越',
          level: 'high',
          levelText: '表现优秀',
          description: '您拥有卓越的专注力和正念觉察能力，能够在各种环境下保持专注，并具备很强的自我觉察能力。这是一个非常宝贵的能力。',
          suggestions: [
            '继续深化正念练习',
            '尝试指导他人进行专注力训练',
            '探索高级冥想技巧',
            '在挑战性环境中保持专注',
            '将正念融入到更多生活场景中'
          ]
        }
      }
    }
  },
  
  methods: {
    goBack() {
      uni.navigateBack()
    },
    
    startTest() {
      this.testStarted = true
      this.currentQuestion = 0
      this.selectedAnswer = null
      this.answers = []
    },
    
    selectAnswer(index) {
      this.selectedAnswer = index
    },
    
    nextQuestion() {
      if (this.selectedAnswer !== null) {
        this.answers[this.currentQuestion] = this.selectedAnswer
        
        if (this.currentQuestion < this.questions.length - 1) {
          this.currentQuestion++
          this.selectedAnswer = this.answers[this.currentQuestion] || null
        } else {
          this.completeTest()
        }
      }
    },
    
    prevQuestion() {
      if (this.currentQuestion > 0) {
        this.currentQuestion--
        this.selectedAnswer = this.answers[this.currentQuestion] || null
      }
    },
    
    completeTest() {
      this.calculateScore()
      this.testCompleted = true
    },
    
    calculateScore() {
      this.totalScore = 0
      this.answers.forEach((answerIndex, questionIndex) => {
        this.totalScore += this.questions[questionIndex].options[answerIndex].score
      })
    },
    
    retakeTest() {
      this.testStarted = false
      this.testCompleted = false
      this.currentQuestion = 0
      this.selectedAnswer = null
      this.answers = []
      this.totalScore = 0
    },
    
    saveResult() {
      const result = {
        testType: 'mindfulness-attention',
        testName: '正念专注力测试',
        score: this.totalScore,
        level: this.resultData.levelText,
        date: new Date().toISOString(),
        answers: this.answers
      }
      
      // 保存到本地存储
      let testHistory = uni.getStorageSync('testHistory') || []
      testHistory.unshift(result)
      uni.setStorageSync('testHistory', testHistory)
      
      uni.showToast({
        title: '结果已保存',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style scoped>
.test-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 导航栏样式 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #f0f0f0;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 32rpx;
  padding-top: 44rpx;
}

.nav-left, .nav-right {
  width: 80rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-icon {
  font-size: 36rpx;
  color: #333;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

/* 测试介绍样式 */
.test-intro {
  padding: 132rpx 32rpx 32rpx;
}

.intro-card {
  background: white;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.test-icon {
  font-size: 120rpx;
  text-align: center;
  margin-bottom: 24rpx;
}

.test-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 12rpx;
}

.test-subtitle {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 32rpx;
}

.test-description {
  font-size: 30rpx;
  color: #666;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40rpx;
}

.test-info {
  background: #f8f9fa;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #666;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 600;
}

.test-tips {
  background: #e8f4fd;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}

.tips-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 16rpx;
}

.tips-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  white-space: pre-line;
}

.start-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  font-weight: 600;
}

/* 测试进行中样式 */
.test-progress {
  padding: 132rpx 32rpx 32rpx;
}

.progress-bar {
  background: white;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.progress-bg {
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 24rpx;
  color: #666;
  text-align: center;
  display: block;
}

.question-card {
  background: white;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.question-number {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 16rpx;
}

.question-text {
  font-size: 32rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 40rpx;
  font-weight: 500;
}

.options-list {
  margin-bottom: 48rpx;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  margin-bottom: 16rpx;
  background: #f8f9fa;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.option-item.selected {
  background: #e8f4fd;
  border-color: #1890ff;
}

.option-radio {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  margin-right: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-item.selected .option-radio {
  border-color: #1890ff;
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  background: #1890ff;
  border-radius: 50%;
}

.option-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.question-actions {
  display: flex;
  gap: 24rpx;
}

.prev-btn, .next-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.prev-btn {
  background: #f5f5f5;
  color: #666;
}

.prev-btn:disabled {
  opacity: 0.5;
}

.next-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.next-btn:disabled {
  background: #ddd;
  color: #999;
}

/* 测试结果样式 */
.test-result {
  padding: 132rpx 32rpx 32rpx;
}

.result-card {
  background: white;
  border-radius: 32rpx;
  padding: 48rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.result-header {
  text-align: center;
  margin-bottom: 32rpx;
}

.result-icon {
  font-size: 120rpx;
  margin-bottom: 24rpx;
}

.result-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 16rpx;
}

.result-score {
  font-size: 32rpx;
  color: #666;
}

.result-level {
  text-align: center;
  margin-bottom: 32rpx;
}

.level-badge {
  display: inline-block;
  padding: 12rpx 32rpx;
  border-radius: 32rpx;
  font-size: 24rpx;
  font-weight: 600;
}

.level-badge.low {
  background: #fff2f0;
  color: #f5222d;
}

.level-badge.medium-low {
  background: #fff7e6;
  color: #fa8c16;
}

.level-badge.medium-high {
  background: #f6ffed;
  color: #52c41a;
}

.level-badge.high {
  background: #e6f7ff;
  color: #1890ff;
}

.result-description, .result-suggestions {
  margin-bottom: 32rpx;
}

.desc-title, .suggestions-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.desc-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.suggestions-list {
  font-size: 28rpx;
  color: #666;
  line-height: 1.8;
}

.suggestion-item {
  margin-bottom: 8rpx;
}

.result-actions {
  display: flex;
  gap: 24rpx;
}

.retake-btn, .save-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}

.retake-btn {
  background: #f5f5f5;
  color: #666;
}

.save-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
</style>